#headline {
    -fx-font-size: 24px;
}

#header {
    -fx-background-color: #ccc;
}

.root {
    -fx-background-color: rgb(238, 238, 238);
    -fx-text-base-color: #000000;
    -fx-font-family: "Lucida Grande";

}

.button,
.toggle-button {
    -fx-background-color: rgba(0, 0, 0, 0.08), linear-gradient(#9a9a9a, #909090), linear-gradient(white 0%, #f3f3f3 50%, #ececec 51%, #f2f2f2 100%);
    -fx-background-insets: 0 0 -1 0, 0, 1;
    -fx-background-radius: 5, 4, 3;
    -fx-padding: 2 15 3 15;
    -fx-text-fill: #000000;
    -fx-font-size: 13px;
}

.button:default {
    -fx-background-color: rgba(0, 0, 0, 0.08), linear-gradient(#5a61af, #51536d), linear-gradient(#e4fbff 0%, #cee6fb 10%, #a5d3fb 50%, #88c6fb 51%, #d5faff 100%);
    -fx-background-insets: 0 0 -1 0, 0, 1;
    -fx-background-radius: 5, 4, 3;
}

.button:armed,
.toggle-button:selected,
.toggle-button:armed {
    -fx-background-color: linear-gradient(#5345b0, #464175), #b7d6f1, linear-gradient(#9ebff2 0%, #5c9dee 50%, #328dee 51%, #8ac9f2 100%);
    -fx-background-insets: 0 0 0 0, 1 1 1 1, 2 1 2 1;
    -fx-background-radius: 5, 4, 3;

}

.button:focused,
.toggle-button:focused {
    -fx-background-color: #C1DDF4, #A0CBEE, #8CB3DF, rgba(0, 0, 0, 0.08), linear-gradient(#669BCC, #6499CA), linear-gradient(white 0%, #f3f3f3 50%, #ececec 51%, #f2f2f2 100%);
    -fx-background-insets: -3, -2, -1, 0 0 -1 0, 0, 1;
    -fx-background-radius: 8, 7, 6, 5, 4, 3;
}

.button:armed:focused,
.toggle-button:selected:focused,
.toggle-button:armed:focused {
    -fx-background-color: #C1DDF4, #A0CBEE, #8CB3DF, linear-gradient(#5486AE, #4C83A8), #b7d6f1, linear-gradient(#9ebff2 0%, #5c9dee 50%, #328dee 51%, #8ac9f2 100%);
    -fx-background-insets: -3, -2, -1, 0 0 0 0, 1 1 1 1, 2 1 2 1;
    -fx-background-radius: 8, 7, 6, 5, 4, 3;

}

.check-box {
    -fx-skin: "com.sun.javafx.scene.control.skin.CheckBoxSkin";
    -fx-label-padding: 0 5 0 5;
    -fx-padding: 0;
}

.check-box .box, .check-box:focused .box {

    -fx-effect: null;
    /*-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.12) , 1, 0 , 0 , 0 );*/
    /* -fx-border-color:
   -fx-border-width: 1;
   -fx-border-radius: 3;*/
    /*  -fx-border-style: solid outside;*/
    -fx-background-color: #999999 /*rgba(79, 79, 79, .5)*/, rgba(0, 0, 0, 0.12), linear-gradient(to bottom, #FFFFFF 0%, #f4f4f4 44%, #ececec 46%, #eeeeee 100%);
    -fx-padding: 3 3 2 2;
    -fx-background-radius: 4, 3;
    -fx-background-insets: 0, 1, 1;
    -fx-border-color: null;

}

.check-box:selected .mark {
    -fx-background-color: #001831;
    -fx-background-insets: 0;
    -fx-padding: 0.333333em; /* 4 -- this is half the size of the mark */
    -fx-scale-shape: false;
    -fx-position-shape: false;
    -fx-shape: "M1,3 l4,4 l8,-12 l-3,-1 l-5,10 l-3,-2 Z";
    -fx-stroke-width: 3;
    -fx-stroke-line-cap: round;
}

.check-box:selected .box, .check-box:selected:focused .box {
    /* -fx-border-color:  linear-gradient(to bottom, #373a59 0%, #060e74 100%);*/
    -fx-border-color: null;
    -fx-background-color: linear-gradient(to bottom, derive(#060e74, 65%) 0%, derive(#373a59, 65%) 100%), /*Stroke*/ linear-gradient(to bottom, #e3f5ff 0%, #a6d3f9 50%, #86c4f9 50.1%, #d5f6ff 100%); /*gradient*/
    -fx-background-insets: 0, 1;
}

/*******************************************************************************
*                                                                             *
* TextField                                                                   *
*                                                                             *
******************************************************************************/
.text-input {
    -fx-text-fill: #000000;
    -fx-highlight-fill: #97BDFF;
    -fx-highlight-text-fill: #000000;
}

.text-field {
    -fx-skin: "com.sun.javafx.scene.control.skin.TextFieldSkin";
    -fx-background-color: linear-gradient(to bottom, #898989 0%, #ACACAC 100%), #DCDCDC, #F2F2F2, #FFFFFF;

    -fx-background-insets: 0, 1 1 1 1, 2 1 1 1, 3 2 1 2;

    -fx-background-radius: 0;

    -fx-padding: 3 5 3 5;
    -fx-prompt-text-fill: derive(-fx-control-inner-background, -30%);
    -fx-cursor: text;
}

.text-field Text {
    -fx-font-smoothing-type: lcd;
}

.text-field:focused {
    -fx-background-color: linear-gradient(to bottom, #678AAF 0%, #7599BF 100%), linear-gradient(to bottom, #B2C5D8 0%, #CBDEF2 100%), #F2F2F2, #FFFFFF;

    -fx-background-insets: 0, 1 1 1 1, 2 2 2 2, 3 2 2 2;

    -fx-background-radius: 0;
}

.text-field:disabled {
    -fx-opacity: -fx-disabled-opacity;
}

/*******************************************************************************
*                                                                             *
* PopupMenu                                                                   *
*                                                                             *
******************************************************************************/

.context-menu {
    -fx-skin: "com.software4java.javafxnativethemes.mac.MacContextMenuSkin";
    -fx-background-color: #C4C4C4, white;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 4, 3;
    -fx-padding: 4 1 4 1;

}

.context-menu .separator {
    -fx-padding: 4 1 1 1;
}

.menu-item {
    -fx-padding: 1 20 3 20;
    -fx-font-size: 14px;
    -fx-font-family: Lucida Grande;
    -fx-font-family: Helvetica;
    -fx-font-family: Geneva;

}

.menu-item .label {
    /* -fx-text-fill: #333333;*/
}

.menu-item:focused .label {
    -fx-text-fill: white;
}

.menu-item:focused {
    -fx-background-color: #5980EF, #0E53EC, linear-gradient(#637EFE, #2B47FD);
    -fx-background-insets: 0, 1 0 0 0, 1 0 1 0;
    -fx-background-radius: 0;
}

/*******************************************************************************
*                                                                             *
* ChoiceBox                                                                   *
*                                                                             *
******************************************************************************/

.choice-box {
    -fx-skin: "com.sun.javafx.scene.control.skin.ChoiceBoxSkin";

    -fx-alignment: CENTER;
    -fx-content-display: CENTER;

    -fx-background-color: rgba(0, 0, 0, 0.08), linear-gradient(#9a9a9a, #909090), linear-gradient(white 0%, #f3f3f3 50%, #ececec 51%, #f2f2f2 100%);
    -fx-background-insets: 0 0 -1 0, 0, 1;
    -fx-background-radius: 5, 5, 4;
    -fx-font-size: 13px;
    -fx-padding: 0 12 0 6;
}

.choice-box Text {
    -fx-font-smoothing-type: lcd;
}

.choice-box:focused {
    -fx-color: -fx-focused-base;
    -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;

    -fx-background-color: #C1DDF4, #A0CBEE, #8CB3DF, rgba(0, 0, 0, 0.08), linear-gradient(#9a9a9a, #909090), linear-gradient(white 0%, #f3f3f3 50%, #ececec 51%, #f2f2f2 100%);
    -fx-background-insets: -3, -2, -1, 0 0 -1 0, 0, 1;
    -fx-background-radius: 8, 7, 6, 5, 5, 4;

}

.choice-box:hover {
    -fx-color: -fx-hover-base;
}

.choice-box:showing {
    -fx-color: -fx-pressed-base;
}

.choice-box .label {
    -fx-padding: 2 4 3 7;

}

.choice-box {
    -fx-text-fill: -fx-text-base-color;
}

.choice-box .open-button {
    -fx-background-color: null;
    -fx-padding: 0 0 0 8;
}

.choice-box .arrow {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 1 0 -1 0, 0;
    /* padding determines the size of the arrow;
       this should match the design size in the SVG */
    -fx-padding: 0;
    -fx-shape: "M 0 -2 h 5 l -2.5 -4 z M 0 1 h 5 l -2.5 4 z";
    -fx-position-shape: false;
    -fx-scale-shape: false;
}

.choice-box .context-menu {
    -fx-background-radius: 6, 5, 4;
}

.choice-box .menu-item {
    -fx-accelerator-gutter: 0;
}

/* TODO: need to use the ID here.  For some reason, the other form does not
 * work.  This might be related to popup issues.
 */
/*.choice-box > * > .menu-item-radio {*/
#choice-box-menu-item > * > .menu-item-radio {
    /* When we show RadioMenuItems in ChoiceBox, we replace the radio shape with
       a check mark, which looks much better */
    -fx-shape: "M0,5H2L4,8L8,0H10L5,10H3Z";
    -fx-scale-shape: false;
}

.choice-box:disabled {
    -fx-opacity: -fx-disabled-opacity;
}

/*******************************************************************************
 *                                                                             *
 * RadioButton                                                                 *
 *                                                                             *
 ******************************************************************************/

.radio-button {
    -fx-skin: "com.sun.javafx.scene.control.skin.RadioButtonSkin";
    -fx-label-padding: 0 0 0 6;
}

.radio-button Text {
    -fx-font-smoothing-type: lcd;
}

.radio-button:focused {
    -fx-color: -fx-focused-base;
}

.radio-button .text {
    -fx-text-fill: -fx-text-background-color;
}

.radio-button .radio {
    -fx-background-color: linear-gradient(#A9A9A9, #949494), linear-gradient(#FFF, #f4f4f4 50%, #ececec 50%);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-padding: 5.5; /* 4 -- padding from outside edge to the inner black dot */
    -fx-effect: dropshadow(one-pass-box, #CCC, 1, .001, 0, 1);
}

.radio-button:focused .radio {
    -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-background-insets: -1.4, 0, 1, 2;
}

.radio-button:hover .radio {
    -fx-color: -fx-hover-base;
}

.radio-button:armed .radio {
    -fx-color: -fx-pressed-base;
    /*#86c1f8*/

}

.radio-button:selected .radio {
    -fx-background-color: linear-gradient(derive(#6e6f85, 10%), derive(#6e6f85, 10%)), linear-gradient(#d0e6fa, #a1cdf8 50%, #86c1f8 50%);
    -fx-background-insets: 0, 1;
    -fx-effect: dropshadow(three-pass-box, rgba(110, 111, 133, .2), 2, .005, 0, 0);
}

.radio-button .dot {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-padding: 2.1; /* 3 -- radius of the inner black dot when selected */
}

.radio-button:selected .dot {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-background-insets: 0 0 -1 0, 0;
    -fx-background-color: #111;
    -fx-background-insets: 0;
    -fx-effect: dropshadow(gaussian, #FFF, 1, .05, 0, 1);
}

.radio-button:disabled {
    -fx-opacity: -fx-disabled-opacity;
}

.radio-button:show-mnemonics .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}

/*******************************************************************************
 *                                                                             *
 * Slider                                                                      *
 *                                                                             *
 ******************************************************************************/

.slider {
    -fx-skin: "com.sun.javafx.scene.control.skin.SliderSkin";
}

.slider Text {
    -fx-font-smoothing-type: lcd;
}

.slider .thumb {
    -fx-background-color: linear-gradient(#A9A9A9, #949494), linear-gradient(#FFF, #f4f4f4 50%, #ececec 50%);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 1.0em; /* large value to make sure this remains circular */
    -fx-padding: 8;
    -fx-effect: dropshadow(one-pass-box, #CCC, 1, .001, 0, 1);
}

.slider .track {
    -fx-background-color: #adadad, linear-gradient(#999, #CCC);
    -fx-background-insets: 0, 1;
    -fx-background-radius: 2.5;
    -fx-padding: 2.6;

    -fx-background-insets: 0, 1;
    -fx-background-color: #AFAFAF, #CCC;
    -fx-effect: innershadow(one-pass-box, #777, 2, .1, 0, 1);
}


